<template>
	<div>
		<el-form :inline="true" size="mini">
			<el-form-item>
				<el-button type="primary"  @click="disableAddTypeDialog=true">新增部门</el-button>
				<el-button type="primary" @click="handleItamManage" >查询部门员工</el-button>
			</el-form-item>
		</el-form>
		
		
		<el-table :data="pageInfo.list" style="100%">
			<el-table-column
				label="编号"
				prop="id"
				width="80"
			></el-table-column>
			
			<el-table-column label="部门名称" width="200">
				<template slot-scope="scope">
					<template v-if="scope.row.edit">
						<el-input v-model="type.dname" size="mini"></el-input>
					</template>
					<template v-else>
						<span>{{scope.row.dname}}</span>
					</template>
				</template>
			</el-table-column>
			
			<el-table-column label="部门类型" width="200" >
				<template slot-scope="scope">
					<template v-if="scope.row.edit">
						<el-input v-model="type.dtype" size="mini"></el-input>
					</template>
					<template v-else>
						<span>{{scope.row.dtype}}</span>
					</template>
				</template>
			</el-table-column>
			
			<el-table-column label="电话号码" width="200" >
				<template slot-scope="scope">
					<template v-if="scope.row.edit">
						<el-input v-model="type.phoneno" size="mini"></el-input>
					</template>
					<template v-else>
						<span>{{scope.row.phoneno}}</span>
					</template>
				</template>
			</el-table-column>
			
			<el-table-column label="传真号" width="200" >
				<template slot-scope="scope">
					<template v-if="scope.row.edit">
						<el-input v-model="type.fax" size="mini"></el-input>
					</template>
					<template v-else>
						<span>{{scope.row.fax}}</span>
					</template>
				</template>
			</el-table-column>
			
			<el-table-column label="描述" width="200" >
				<template slot-scope="scope">
					<template v-if="scope.row.edit">
						<el-input v-model="type.descr" size="mini"></el-input>
					</template>
					<template v-else>
						<span>{{scope.row.descr}}</span>
					</template>
				</template>
			</el-table-column>
			
			<el-table-column label="成立时间" width="200" >
				<template slot-scope="scope">
					<template v-if="scope.row.edit">
						<el-input v-model="type.estdate" size="mini"></el-input>
					</template>
					<template v-else>
						<span>{{scope.row.estdate}}</span>
					</template>
				</template>
			</el-table-column>
			
			<el-table-column label="操作" width="300">
				<template slot-scope="scope">
					<template v-if="scope.row.edit">
						<el-button @click="handleTypeSave(scope)" size="mini" type="primary">保存</el-button>
						<el-button size="mini" @click="scope.row.edit=false" type="danger">取消</el-button>
					</template>
					<template v-else>
						<el-button @click="handleTypeEdit(scope)" size="mini" type="primary">编辑</el-button>
						<el-button size="mini" @click="handleTypeDel(scope)" type="danger">删除</el-button>
					</template>					
				</template>
			</el-table-column>
		</el-table>
		
		
		<el-pagination
			layout="prev,pager,next,total,jumper,sizes"			
			:total="pageInfo.total"
			:page-size="pageInfo.pageSize"
			:page-count="pageInfo.navigatePages"
			:page-sizes="[5,10,15,20]"
			:current-page="pageInfo.pageNum"
			background
			@current-change="handleCurrentChange"
			@size-change="handleSizeChange"
		></el-pagination>
		
		<el-dialog :visible.sync="disableAddTypeDialog" title="新增部门" center>
			<el-form :inline="true" align="center" size="mini">
				<el-form-item label="新部门名称:">
					<el-input v-model="type.dname" placeholder="新部门名称"></el-input>
				</el-form-item>
				<el-form-item label="新部门类型:">
					<el-input v-model="type.dtype" placeholder="新部门类型"></el-input>
				</el-form-item>
				<el-form-item label="电话号码:">
					<el-input v-model="type.phoneno" placeholder="电话号码"></el-input>
				</el-form-item>
				<el-form-item label="传真号:">
					<el-input v-model="type.fax" placeholder="传真号"></el-input>
				</el-form-item>
				<el-form-item label="描述:">
					<el-input v-model="type.descr" placeholder="描述"></el-input>
				</el-form-item>
				<el-form-item label="成立时间:">
					<el-date-picker v-model="type.estdate" value-format="yyyy-MM-dd" placeholder="成立时间"></el-date-picker>
				</el-form-item>
				<el-form-item>
					<el-button type="warning" @click="disableAddTypeDialog=false">取消</el-button>
					<el-button type="primary" @click="insertType()">保存</el-button>
				</el-form-item>
			</el-form>
		</el-dialog>
		
		<el-dialog :visible.sync="disableItemDialog" title="查询员工" center>
			<div align="center">
				<el-form inline size="mini">
					
					<el-form-item>
						<el-select placeholder="选择部门" v-model="deptno">
							<el-option
								v-for="type in typeList"
								:key = "type.id"
								:label="type.dname"
								:value="type.id"
							>
								
							</el-option>
						</el-select>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" @click="getEmp()">查询该部门员工</el-button>
					</el-form-item>
				</el-form>
				<el-table :data="emp.list">
					<el-table-column type="selection"></el-table-column>
					<el-table-column label="姓名" prop="name" width="80"></el-table-column>
				</el-table>
				
			</div>
			<div slot="footer">
				<el-button type="primary" size="mini" @click="disableItemDialog=false">关闭</el-button>
			</div>
		</el-dialog>
		
		</div>
</template>

<script>
	export default{
		data(){
			return{				
				pageInfo:{
					pageNum:1,
					pageSize:5
				},
				type:{},
				disableAddTypeDialog:false,
				disableItemDialog:false,
				typeList:[],
				deptno:'',
				emp:{},
				ids:[]
			}
		},
		created(){
			this.showData(1,this.pageInfo.pageSize);
		},
		methods:{
			showData(pageNum,pageSize){
				let url = "dept/getPaged";
				let params = `pageNum=${pageNum}&pageSize=${pageSize}`;
				axios.post(url,params).then(resp=>{
					this.pageInfo = resp.data.data;
				});
			},
			handleCurrentChange(pageNum){
				this.showData(pageNum,this.pageInfo.pageSize);
			},
			handleSizeChange(pageSize){
				this.showData(1,pageSize);
				this.pageInfo.pageSize = pageSize;
			},				
			search(){
				this.showData(1,this.pageInfo.pageSize);
			},
			handleTypeEdit(scope){
				//console.log(scope.$index,scope.row);
				this.$set(scope.row,"edit",true);
				//对象克隆
				this.type = {...scope.row};
			},
			handleTypeSave(scope){
				let url = "dept/update";
				let type = this.type;
				axios.post(url,this.type).then(resp=>{
					if(resp.data.data == 1){
						scope.row.edit = false;
						scope.row.dname = type.dname;
						scope.row.dtype = type.dtype;
						scope.row.phoneno = type.phoneno;
						scope.row.fax = type.fax;
						scope.row.descr = type.descr;
						scope.row.estdate = type.estdate;
					}
				});
			},
			handleTypeDel(scope){
				this.$confirm("是否删除","提示").then(()=>{
					let url = "dept/delete"
					axios.post(url,`id=${scope.row.id}`).then(resp=>{
						if(resp.data.data == 1){
							this.$alert("删除成功！")
							this.showData(1,this.pageInfo.pageSize)
						}
					});
				}).catch(()=>{
					console.log("cancel");
				})
				
				
			},
			insertType(){
				let url = "dept/insert"
				axios.post(url,this.type).then(resp=>{
					if(resp.data.data == 1){
						this.showData(1,this.pageInfo.pageSize);
						this.disableAddTypeDialog=false
						
						this.type= {};
					}
				});
			},
			handleItamManage(){
				this.disableItemDialog = true;
				let url = "dept/getAll";
				
				axios.post(url).then(resp=>{
					this.typeList = resp.data.data;
				});
			},
			getEmp(){
				let url1 = "dept/getById";
				let id = this.deptno;
				axios.post(url1,`id=${id}`).then(resp=>{
					let dept = resp.data.data;
					
					let url2 = "emp/getByDept";
					axios.post(url2,dept).then(resp=>{
						this.emp = resp.data.data;
					});
				});
				
				
			
	},
	},
	}
</script>

<style>
</style>
